import React, { PureComponent } from 'react';
import { Row, Col, Card, List, Avatar, Tag, Breadcrumb, Icon } from 'antd';
import { connect } from 'dva';
import numeral from 'numeral';
import Link from 'umi/link';
import GridContent from '@/components/PageHeaderWrapper/GridContent'
import { ChartCard, MiniArea, MiniBar, MiniProgress } from '@/components/Charts';

import ForeCast from '../forecast/chart'
import DeviceCard from './component/deviceCard'
import DeviceCardBeng from './component/deviceCardBeng'
import DeviceCardTa from './component/deviceCardTa'

import DeviceIndexCard from './component/device_index';
import DeviceTimeSeries from './component/device_timeseries';
import DeciceMiniChart  from './component/device_minichart'

import resource from '../resource'
import styles from '../styles.less'


// eslint-disable-next-line react/prefer-stateless-function
class coolDiagram extends PureComponent {
    constructor(props) {
        super(props)
        this.state = {
            pd: [],
        }
    }

    render() {
        const { pd } = this.state;
        const eseModel = [
            {
                "code": 1148784465628102700,
                "name": "能源站系统",
                "projectCode": 1148784465300947000,
                "typeCode": 1148784465556799500,
                "modeCode": 1148784465594548200,
                "linkedCode": 1,
                "address": null,
                "memo": null,
                "delete": 0,
                "current": 1,
                "version": 1,
                "modeName": "能源站系统",
                "typeName": "能源站系统",
                "projectName": "XXX医院",
                "linkedDeviceName": null
            },
            {
                "code": 1148784465791680500,
                "name": "1#定频冷却水泵",
                "projectCode": 1148784465300947000,
                "typeCode": 1148784465728766000,
                "modeCode": 1148784465753931800,
                "linkedCode": 1148784465628102700,
                "address": null,
                "memo": null,
                "delete": 0,
                "current": 1,
                "version": 1,
                "modeName": "定频冷却水泵",
                "typeName": "水泵",
                "projectName": "XXX医院",
                "linkedDeviceName": "能源站系统"
            },
            {
                "code": 1148784465829429200,
                "name": "2#定频冷却水泵",
                "projectCode": 1148784465300947000,
                "typeCode": 1148784465728766000,
                "modeCode": 1148784465753931800,
                "linkedCode": 1148784465628102700,
                "address": null,
                "memo": null,
                "delete": 0,
                "current": 1,
                "version": 1,
                "modeName": "定频冷却水泵",
                "typeName": "水泵",
                "projectName": "XXX医院",
                "linkedDeviceName": "能源站系统"
            },
            {
                "code": 1148784465867178000,
                "name": "3#定频冷却水泵",
                "projectCode": 1148784465300947000,
                "typeCode": 1148784465728766000,
                "modeCode": 1148784465753931800,
                "linkedCode": 1148784465628102700,
                "address": null,
                "memo": null,
                "delete": 0,
                "current": 1,
                "version": 1,
                "modeName": "定频冷却水泵",
                "typeName": "水泵",
                "projectName": "XXX医院",
                "linkedDeviceName": "能源站系统"
            },
            {
                "code": 1148784465909121000,
                "name": "4#定频冷却水泵",
                "projectCode": 1148784465300947000,
                "typeCode": 1148784465728766000,
                "modeCode": 1148784465753931800,
                "linkedCode": 1148784465628102700,
                "address": null,
                "memo": null,
                "delete": 0,
                "current": 1,
                "version": 1,
                "modeName": "定频冷却水泵",
                "typeName": "水泵",
                "projectName": "XXX医院",
                "linkedDeviceName": "能源站系统"
            },
            {
                "code": 1148784466072698900,
                "name": "1#变频冷却水泵",
                "projectCode": 1148784465300947000,
                "typeCode": 1148784465728766000,
                "modeCode": 1148784466039144400,
                "linkedCode": 1148784465628102700,
                "address": null,
                "memo": null,
                "delete": 0,
                "current": 1,
                "version": 1,
                "modeName": "变频冷却水泵",
                "typeName": "水泵",
                "projectName": "XXX医院",
                "linkedDeviceName": "能源站系统"
            },
            {
                "code": 1148784466131419100,
                "name": "2#变频冷却水泵",
                "projectCode": 1148784465300947000,
                "typeCode": 1148784465728766000,
                "modeCode": 1148784466039144400,
                "linkedCode": 1148784465628102700,
                "address": null,
                "memo": null,
                "delete": 0,
                "current": 1,
                "version": 1,
                "modeName": "变频冷却水泵",
                "typeName": "水泵",
                "projectName": "XXX医院",
                "linkedDeviceName": "能源站系统"
            },
            {
                "code": 1148784466223693800,
                "name": "3#变频冷却水泵",
                "projectCode": 1148784465300947000,
                "typeCode": 1148784465728766000,
                "modeCode": 1148784466039144400,
                "linkedCode": 1148784465628102700,
                "address": null,
                "memo": null,
                "delete": 0,
                "current": 1,
                "version": 1,
                "modeName": "变频冷却水泵",
                "typeName": "水泵",
                "projectName": "XXX医院",
                "linkedDeviceName": "能源站系统"
            },
            {
                "code": 1148784466261442600,
                "name": "4#变频冷却水泵",
                "projectCode": 1148784465300947000,
                "typeCode": 1148784465728766000,
                "modeCode": 1148784466039144400,
                "linkedCode": 1148784465628102700,
                "address": null,
                "memo": null,
                "delete": 0,
                "current": 1,
                "version": 1,
                "modeName": "变频冷却水泵",
                "typeName": "水泵",
                "projectName": "XXX医院",
                "linkedDeviceName": "能源站系统"
            }
        ];

        const devices = eseModel.slice(0, 6);
      
        const pics = [resource.pic.zhiranji, resource.pic.fadianji, resource.pic.kongqiyuanreb, resource.pic.lenqueta,
        resource.pic.shuibeng, resource.pic.yanqiji];

        return (
            <div>

                <div style={{ margin: '-24px -24px 0 ' }} className={styles.wrapper}   >

                    <div style={{ paddingBottom: '16px' }} >
                        <Breadcrumb>
                            <Breadcrumb.Item>
                                <Link to="/homepage">首页</Link>
                            </Breadcrumb.Item>
                            <Breadcrumb.Item>
                                <Link to="/iiot_monitor/main-sys">能源站系统</Link>
                            </Breadcrumb.Item>

                            <Breadcrumb.Item>直燃机系统</Breadcrumb.Item>
                        </Breadcrumb>
                    </div>
                </div>


                <div style={{ margin: '24px 0px 0 ' }}  >
                    <GridContent >
                        <Row gutter={24} style={{ marginBottom: 16 }} align="bottom" >

                            <Col sm={24} xs={24} md={16}>

                                <Card size="small" title="实时数据" style={{ marginBottom: 24 }}  >
                                    <Card.Grid style={{ width: '100%', padding: '12px ' }}>
                                        <DeviceIndexCard></DeviceIndexCard>
                                    </Card.Grid>

                                    {
                                        devices.map((item, index) => {
                                            return <Card.Grid style={{ width: '220px', padding: '6px' }}>
                                                <DeviceCard deviceName={item.name} deviceSrc={pics[index % pics.length]} ></DeviceCard>
                                            </Card.Grid>


                                        })
                                    }
                                    {/* <Card.Grid style={{ width: '220px', padding: '6px' }}><DeviceCard deviceName="1#直燃机" deviceSrc={resource.pic.zhiranji} ></DeviceCard></Card.Grid>
                                    <Card.Grid style={{ width: '220px', padding: '6px' }}><DeviceCard deviceName="2#直燃机" deviceSrc={resource.pic.zhiranji}></DeviceCard></Card.Grid>

                                    <Card.Grid style={{ width: '220px', padding: '6px' }}><DeviceCardBeng deviceName="冷冻水泵" deviceSrc={resource.pic.shuibeng} ></DeviceCardBeng></Card.Grid>
                                    <Card.Grid style={{ width: '220px', padding: '6px' }}><DeviceCardBeng deviceName="冷却水泵" deviceSrc={resource.pic.shuibeng}></DeviceCardBeng></Card.Grid>
                                    <Card.Grid style={{ width: '220px', padding: '6px' }}><DeviceCardTa deviceName="冷却塔" deviceSrc={resource.pic.lenqueta}></DeviceCardTa></Card.Grid> */}

                                </Card>
                                <Card size="small" title="时序数据" style={{ marginBottom: 24, height: 280 }}>
                                    <DeviceTimeSeries id="trrr11111" />
                                </Card>
                            </Col>
                            <Col sm={24} xs={24} md={8}>

                            
                                <DeciceMiniChart></DeciceMiniChart>
 
                                <Card size="small" title="故障信息" style={{ marginBottom: 0 }}
                                    actions={[<span><Icon type="setting" /> 10</span>, <span> <Icon type="edit" /> 10</span>, <span> <Icon type="ellipsis" />10</span>]}
                                >
                                </Card>

                                <Card size="small" title="工单信息" style={{ marginBottom: 0 }}
                                    actions={[<span><Icon type="setting" /> 10</span>, <span> <Icon type="edit" /> 10</span>, <span> <Icon type="ellipsis" />10</span>]}
                                >
                                </Card>
                                <Card size="small" title="运行建议" style={{ marginBottom: 24 }}

                                >
                                </Card>

                                <Card size="small" title="负荷预测" style={{ marginBottom: 24 }}>
                                    <ForeCast id="ForeCast_1907111146"></ForeCast>
                                </Card>
                            </Col>
                        </Row>



                    </GridContent>
                </div>
            </div>


        );
    }
}

export default coolDiagram;